<template>
  <div>
    <el-dialog :title="title" :visible="visible" @close="handleClose" width="600px">
      <el-form :model="formGoodsType" label-position="right" :rules="rules" ref="formGoodsType">
        <el-row>
          <el-col :span="24">
            <el-form-item label="父类编号" prop="pk_marbasclass" :label-width="formLabelWidth">
              <el-select  clearable v-model="formGoodsType.pk_marbasclass" style="width: 100%;">
                <el-option v-for="(item, index) in options" :key="index" :value="item.value"
                  :label="`(${item.nccStuCode})`+ item.label">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="子类名称" prop="stuClassName" :label-width="formLabelWidth">
              <el-input v-model="formGoodsType.stuClassName" placeholder="请输入子类姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="启用状态" :label-width="formLabelWidth" prop="enableState">
              <el-switch v-model="formGoodsType.enableState" active-text="启用" inactive-text="停用" :active-value="'2'"
                         :inactive-value="'1'">
              </el-switch>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  basicSkuTypeDetailSave,
  skuTypeDetail,
  findTreeSkuTypeData
} from '@/api/basic/PersonnelInformation.js'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      cascaderProps: {
        label: "label", // 默认为label字段
        children: "children",
        checkStrictly: true
      },
      formGoodsType: {
        pk_marbasclass: '',
        stuClassName: '',
        enableState: '2',
      },
      options: [],
      title: '新增商品类型',
      formLabelWidth: '110px',
      rules: {
        pk_marbasclass: [{
          required: true,
          message: '请输入父类编码',
          trigger: 'blur'
        }],
        stuClassName: [{
          required: true,
          message: '请请输入子类名称',
          trigger: 'blur'
        }]
      },
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      findTreeSkuTypeData().then(response => {
        this.options = response.data;
        this.processCascaderData(this.options);
      });
    },
    processCascaderData(data) {
      data.forEach(node => {
        // 根据节点是否有name来决定label值
        node.label = node.nccStuName ? node.nccStuName : node.stuClassName;
        node.value = node.pkMarbasclass ? node.pkMarbasclass : node.stuClassId
        if (node.children) {
          this.processCascaderData(node.children); // 递归处理子节点
        }
      });
    },
    //获取当前行信息
    openDialog(type, val) {
      this.title = type === 'edit' ? '编辑商品类型' : '新增商品类型';
      // 根据类型区分新增和编辑逻辑
      if (type === 'edit' && val) {
        this.formGoodsType = val;
      } else {
        this.formGoodsType = {
          stuClassName: '',
          enableState: '2',
          pk_marbasclass: val.pkMarbasclass
        }
      }
    },
    // 提取重置表单的逻辑
    handleClose() {
      // 通过事件通知父组件更新visible值，触发update:visible事件
      this.$emit('update:visible', false);
      this.formGoodsType = {};
      this.$nextTick(() => {
        this.$refs.formGoodsType.resetFields();
      })
    },
    //提交表单
    submit() {
      this.$refs.formGoodsType.validate((valid) => {
        if (valid) {
          const apiMethod = this.title === '新增商品类型' ? basicSkuTypeDetailSave : skuTypeDetail;
          // 调用相应的 API 方法
          apiMethod(this.formGoodsType).then(res => {
            this.$emit('addSuccess'); // 通知父组件添加成功
            this.$message({
              message: res.msg, // 显示成功消息
              type: 'success',
            });
            // 提交成功后可以选择清空表单
            this.handleClose();
          }).catch(err => {
            this.$message({
              message: err?.msg || '操作失败', // 捕获错误信息
              type: 'error',
            });
          });
        } else {
          // 校验失败
          return false;
        }
      });
    }
  },
};
</script>

<style></style>
